/**
 * @author hp
 */
var isMouseDown = false;
var keyList = new Array();
var word = "";
var previewWordDom;
var foundWordListDom;
var foundWordCnt = 0;

window.onload = init;

function init() {
	previewWordDom = document.getElementById('previewWord');
	foundWordListDom = document.getElementById('foundWordList');
	createBoard("HelloWorldThisIs");
	for(var i = 1; i <= 16; i++) {
		var str = "#key" + i;
		$(str).mouseenter(handleMouseEnter);
		// jquery to register a mouseEnter event
	}
}

// This is temporary for testing
function createBoard(text) {
	for(var i = 1; i <= 16; i++) {
		document.getElementById('keyLetter' + i).innerHTML = text[i - 1];
	}
}

function handleMouseDown(key) {
	if(isMouseDown == false) {
		isMouseDown = true;
		key.style.boxShadow = "inset 0 0 5px 5px #888";
		// key.className = "keySelected";
		keyList.push(key);
		word += key.innerText;
		previewWordDom.innerHTML = "<p class=\"previewLetter\">" + word + "</p>";
	} else if(isMouseDown == true) {
		for(var i = 0; i < keyList.length; i++) {
			var keyEle = keyList[i];
			keyEle.style.boxShadow = "none";
			// keyEle.className = "key";
		}
		isMouseDown = false;
		previewWordDom.innerHTML = "";
		foundWordCnt++;
		var foundWord = document.createElement('p');
		foundWord.className = "foundWord";
		foundWord.innerHTML = foundWordCnt + ". " + word;
		foundWordListDom.appendChild(foundWord);
		// foundWordListDom.innerHTML = "<p class=\"foundWord\">" + foundWordCnt + ". " + word + "</p>";
		word = "";
	}
}

function handleMouseEnter() {
	if(isMouseDown == true) {
		this.style.boxShadow = "inset 0 0 5px 5px #888";
		// this.className = "keySelected";
		keyList.push(this);
		word += this.innerText;
		previewWordDom.innerHTML = "<p class=\"previewLetter\">" + word + "</p>";
	}
}